<template>
    <div class="component-regist">
        <modal class='component-regist__modal'
            :maskClose='maskClose' 
            :show='show'
            mode='bottom'
            closeButton
            @close='closeModal'>
            <div class='component-regist__header'>
                <p class='component-regist__bind-text'>忘记密码</p>
            </div>
            <div class="component-regist__form" v-if="step===1">
                <div class="form__item">
                    <div class="form__value">
                        <input v-model='tel' type="tel" placeholder="请输入手机号码" maxlength="11">
                        <p class="regist__validate" v-if='error_tel'>{{ error_tel }}</p>
                    </div>
                </div>
                <div class="form__item">
                    <div class="form__value">
                        <input v-model='smsCode' type="number" pattern="[0-9]*" placeholder="请输入验证码">
                        <p class="login__validate" v-if='error_smsCode'>{{ error_smsCode }}</p>
                        <div class="login__get-captcha" :class="{'sent': sent}">
                            <span class='get-code' @click='getSmscode'>获取验证码</span>
                            <span class='re-send'>{{ reSend }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="component-regist__button" @click='next' v-if="step===1"><span class="button">下一步</span></div>

            <div class="component-regist__form" v-if="step===2">
                <div class="form__item">
                    <div class="form__value">
                        <input v-model='password' type="password" placeholder="请设置新的密码">
                        <p class="login__validate" v-if='error_password'>{{ error_password }}</p>
                    </div>
                </div>
                <div class="form__item">
                    <div class="form__value">
                        <input v-model='confirmPwd' type="password" placeholder="请确认新的密码">
                        <p class="login__validate" v-if='error_confirm'>{{ error_confirm }}</p>
                    </div>
                </div>
            </div>
            <div class="component-regist__button" @click='reset' v-if="step===2"><span class="button">确定</span></div>
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import modal from '../components/Modal.vue'
    import checkBox from '../components/CheckBox.vue'
    import verificationCode from '../components/VerificationCode.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { getScript, rules } from '../utils/utils'
    import { loginValidation } from '../validation/validation'
    import { allApi, loginApi, contactApi, loanInApi, loanOutApi, userApi, payApi } from '../api/api'

    export default {
        name:'User',
        components:{
            modal,
            verificationCode,
            checkBox
        },
        filters:{
        },
        props: {
            show: {
                type: Boolean,
                required: true,
                default:false
            },
            maskClose:{
                type: Boolean,
                default:true
            },
            action: {
                type: String,
                default:''
            },
            tel: {
                type: String,
                default : ''
            }
        },
        data() {
            return {
                password: '',
                confirmPwd: '',
                smsCode:'',
                second:30,
                sent:false,
                inst:{},
                info:{},
                show_captcha:true,
                validate:'',
                error_tel: "",
                error_smsCode:"",
                error_password:'',
                reSend:'30秒后重新发送',
                error_confirm: '',
                step: 1
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            registerAgreementUrl(){
                if(this.localInfo.configInfo){
                    return this.localInfo.configInfo.registerAgreementUrl
                }
            },
            captchaId(){
                if(this.localInfo.configInfo && this.localInfo.configInfo.checkCaptchaParam){
                    return this.localInfo.configInfo.checkCaptchaParam.captchaId
                }
            },
            telPass(){
                return rules.tel(this.tel)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setSessionId',
                'setUserInfo',
                'setNeedregist',
            ]),
            // function
            next(){
                if(!this.verification()) return
                this.step = 2
            },
            getAuth(){
                if(!this.tel){
                    this.setMsgTip({
                        text:'请先输入手机号码',
                        type:'warn'
                    })
                    return
                }

                if(this.tel && !rules.tel(this.tel)){
                    this.setMsgTip({
                        text:'请输入正确的手机号码',
                        type:'warn'
                    })
                    return
                }
                this.getCode()
            },
            getCode(validate){
                if(this.sent) return
                this.sent = true
            },
            goregist(){
                location.href = this.registerAgreementUrl
            },
            emitClose(){
                this.$emit('close')
            },
            closeModal() {
                if(this.step===2) {
                    this.step = 1
                    return
                }
                this.emitClose()
            },
            emitFinish(){
                this.$emit('finish')
            },
            // 立即重置密码
            reset: function() {
                if(!this.verification()) return;
                this.showLoading();
                let params = { 
                    userPhone: this.tel,
                    userPwd: this.password,
                    phoneCode: this.smsCode    
                }
                loginApi.updUserPwd(params)
                .then(function(result) {
                    this.hideLoading()
                    this.show = false
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            
            setCaptcha(){
                this.show_captcha = true
                getScript('//cstaticdun.126.net/load.min.js',()=>{
                    //this.initCaptcha()
                })
            },
            getSmscode(){
                this.verification('send')
                if(!this.passed) return

                this.sent = true

                this.countDown()
                this.showLoading()
                userApi.sendSms({
                    userPhone:this.tel,
                    platform:'H5',
                })
                .then(result=>{
                    this.smsCode = result
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.sent = false
                    this.loading_count = false
                    this.hideLoading()
                })
                this.sent = true
            },
            countDown(){
                setTimeout(()=>{
                    if(this.second == 1){
                        this.sent = false
                        this.second = 30
                        return
                    }
                    this.second --
                    this.reSend = `${this.second}秒后重新发送`
                    this.countDown()
                },1000)
            },
            verification(type){
                // 验证手机号码与验证码
                if(this.tel == ''){
                    this.error_tel = '手机号码不能为空'
                    this.passed = false
                    this.title = '下一步'
                    this.mode = ''
                    return
                }
                if(this.tel && !rules.tel(this.tel)){
                    this.error_tel = '请输入正确的手机号码'
                    this.passed = false
                    this.title = '下一步'
                    this.mode = ''
                    return
                }
                if(type != 'send')
                    if(this.smsCode == ''){
                        this.error_smsCode = '请输入验证码'
                        this.passed = false
                        return
                    }
                // 验证两次密码是否一致及密码安全性
                if(this.step == 2) {
                    if(this.password == ''){
                        this.error_password = '请输入登录密码'
                        this.passed = false
                        return
                    }
                    if(this.password && !rules.password(this.password)){
                        this.error_password = '登录密码只能是6-18位字母数字组合'
                        this.passed = false
                        return
                    }
                    if(this.password != this.confirmPwd) {
                        this.error_password = '两次密码不一致'
                        this.passed = false
                        return
                    }
                }
                this.passed = true
                this.error_tel = ''
                this.error_smsCode = ''
                this.error_password = ''
                return true
            },
        },
        created(){
        },
        mounted(){
        },
        watch: {
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .component-regist__modal{
        .component-modal__main{
            padding: 0 54px;
        }
        .component-modal__container{
            max-height:100%;
            top:0!important;
        }
        .component-regist__header{
            padding-top: 16px;
            padding-left: 0;
            text-align: center;

            .component-regist__header-button {
                position: absolute;
                right: 16px;
                top: 16px;
                line-height: 30px;
                font-size: 16px;
                color: $importColor;
            }
        }
        .component-regist__welcome{
            @extend %font-caption;
        }
        .component-regist__bind-text{
            @extend %font-title;
            color:$importColor;
        }
        .component-regist__form{
            margin-top: 60px;
            .form__item{  
                margin-top: 24px;
                &:last-child{
                    margin-top:32px;
                    border-bottom: 0;
                    &:after{
                        display: block;
                    }
                }
                &:after{
                    left:0;
                    right:0;
                }
            }
            .form__value{
                position: relative;
                input{
                    @extend %font-subhead;
                    padding:7px 0;
                    text-align: left;
                }
            }
            .regist__forget{
                padding-right: 0;
                text-align: right;
            }
        }
        .component-regist__button{
            margin-top: 38px;
        }
        .component-regist__register{
            @extend %font-caption;
            padding-top: 14px;
            text-align: center;
            span{
                color:$blue;
            }
        }
        #captcha{
            // opacity:0;
            // position: absolute;
            // height:48px;
            // width: 120px;
            // right:0;
            // bottom:0;
        }
    }

</style>
